<template>
    <div class="box">
        <switchBox :data="swiperData" :config="swiperProps" showHeader>
            <template #content="{ data, index }">
               <scrollList :data="data" :columnData="columnData" :key="index" :option="temOption"></scrollList>
            </template>
        </switchBox>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
    const columnData = [
        { title: '姓名', dataIndex: 'FullName' },
        { title: '年龄', dataIndex: 'Age' },
        { title: '数量', dataIndex: 'Count' },
        { title: '性别', dataIndex: 'Gender' }
    ];
    const textData = ref([
        { FullName: '111你好啊啊啊啊啊啊啊啊啊', Age: 12, Count: 23, Gender: '男' },
        { FullName: '111', Age: 12, Count: 23, Gender: '男' },
        { FullName: '111', Age: 12, Count: 23, Gender: '男' },
        { FullName: '111', Age: 12, Count: 23, Gender: '男' },
        { FullName: '111', Age: 12, Count: 23, Gender: '男' },
        { FullName: '111', Age: 12, Count: 23, Gender: '男' }
    ]);
    const textData2 = ref([
        { FullName: '啊啊啊啊啊啊啊啊啊', Age: 12, Count: 23, Gender: '男' },
        { FullName: '222', Age: 12, Count: 23, Gender: '男' },
        { FullName: '333333', Age: 12, Count: 23, Gender: '男' },
        { FullName: '111', Age: 12, Count: 23, Gender: '男' },
        { FullName: '111', Age: 12, Count: 23, Gender: '男' },
        { FullName: '111', Age: 12, Count: 23, Gender: '男' }
    ]);
    const textData3 = ref([
        { FullName: '33331232', Age: 12, Count: 23, Gender: '男' },
        { FullName: '222', Age: 12, Count: 23, Gender: '男' },
        { FullName: '333333', Age: 12, Count: 23, Gender: '男' },
        { FullName: '111', Age: 12, Count: 23, Gender: '男' },
        { FullName: '111', Age: 12, Count: 23, Gender: '男' },
        { FullName: '111', Age: 12, Count: 23, Gender: '男' }
    ]);

    onMounted(()=>{
        setTimeout(()=>{
            swiperData[0].value = textData.value;
        },1000);
    });
    const swiperData= reactive([
        { title:'今日', value: [] },
        { title:'7天', value: [] },
        { title:'30天', value: [] }
    ]);

    // 轮播组件自带的参数
    const swiperProps= {
        autoPlay: true,
        indicatorType:"never",
        showArrow:"never",
        moveSpeed: 5000,
        change:(index)=>{
            if(index==1){
                swiperData[index-1].value = textData.value;
            } else if(index==2){
                // swiperData[index-1].value = textData2.value;
                swiperData[index-1].value = [];
            } else{
                swiperData[index-1].value = textData3.value;
            }
            
        }
    }
    const temOption =  { step: 0.5, hover: true };
</script>

<style lang="less" scoped>
    .box{
        width: 400px;
        height: 200px;
        overflow: hidden;
    }
</style>